<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MeetHere-管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/dashboard.css}">
    <style type="text/css">
        body{
            background-color: #f5f5f5;
            padding-top: 55px;
        }
        html {
            overflow-y: scroll;
        }
        :root {
            overflow-y: auto;
            overflow-x: hidden;
        }
        :root body {
            position: absolute;
        }
        body {
            width: 100vw;
            overflow: hidden;
        }
    </style>
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/jquery.twbsPagination.js}"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div th:include="layout/left :: left(user=${session.admin},flag=${session.admin}!=null,page='user_manage')"></div>
        <main class="col-10 ml-auto px-4 mt-4">
            <div class="col-12 mb-3 pb-3 border-bottom border-gray">
                <h2>用户管理</h2>
            </div>

            <div class="col-4 mb-4">
                <a class="btn-sm btn-primary" th:href="@{user_add}">
                    <span class="glyphicon glyphicon-plus"></span>
                    添加用户
                </a>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>邮箱</th>
                        <th>手机</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="content">
<!--                    <tr>-->
<!--                        <td>1,001</td>-->
<!--                        <td>Lorem</td>-->
<!--                        <td>ipsum</td>-->
<!--                        <td>648239166@qq.com</td>-->
<!--                        <td>13759372593</td>-->
<!--                        <td>-->
<!--                            <div>-->
<!--                                <a class="btn-sm btn-info mr-2" href="#">-->
<!--                                    <span class="glyphicon glyphicon-edit"></span>-->
<!--                                    修改-->
<!--                                </a>-->
<!--                                <a class="btn-sm btn-danger" th:href="@{user_manage}">-->
<!--                                    <span class="glyphicon glyphicon-trash"></span>-->
<!--                                    删除-->
<!--                                </a>-->
<!--                            </div>-->
<!--                        </td>-->
<!--                    </tr>-->
                    </tbody>
                </table>
            </div>

<!--            <div class="p-2 pb-3">-->
<!--                <nav class="">-->
<!--                    <ul class="pagination mb-0 justify-content-center">-->
<!--                        <li class="page-item">-->
<!--                            <a class="page-link" href="#" aria-label="Previous">-->
<!--                                <span aria-hidden="true">&laquo;</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">1</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                        <li class="page-item"><a class="page-link" href="#">3</a></li>-->
<!--                        <li class="page-item">-->
<!--                            <a class="page-link" href="#" aria-label="Next">-->
<!--                                <span aria-hidden="true">&raquo;</span>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </nav>-->
<!--            </div>-->
            <div class="d-flex justify-content-center mt-2" id="pagination-demo"></div>
            <div th:include="layout/footer :: Footer"></div>
        </main>

    </div>
</div>
<script type="text/javascript">
    // $(document).ready(function () {
    //     getPage(1);
    // });

    $('#pagination-demo').twbsPagination({
        totalPages: [[${total}]],
        visiblePages: 5,
        onPageClick: function (event, page) {
            getPage(page);
        }
    });

    function getPage(page){
        $.ajax({//根据page去后台加载数据
            url : "/userList.do",
            type : "get",
            dataType : "json",
            data : {"page" : page},
            success : function(data) {
                appendHtml(data);//处理数据
                console.log(data);
            }
        });
    }
    function appendHtml(list) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
        let tableShow = '';
        for (let i = 0; i < list.length; i++) {
            tableShow += '<tr>\n' +
                '                        <td>'+list[i].id+'</td>\n' +
                '                        <td>'+list[i].userID+'</td>\n' +
                '                        <td>'+list[i].userName+'</td>\n' +
                '                        <td>'+list[i].email+'</td>\n' +
                '                        <td>'+list[i].phone+'</td>\n' +
                '                        <td>\n' +
                '                            <div>\n' +
                '                                <a class="btn-sm btn-info mr-2" href="/user_edit?id='+list[i].id+'">\n' +
                '                                    <span class="glyphicon glyphicon-edit"></span>\n' +
                '                                    修改\n' +
                '                                </a>\n' +
                '                                <a class="btn-sm btn-danger" href="#" onclick="del('+list[i].id+',this)">\n' +
                '                                    <span class="glyphicon glyphicon-trash"></span>\n' +
                '                                    删除\n' +
                '                                </a>\n' +
                '                            </div>\n' +
                '                        </td>\n' +
                '                    </tr>';
        }
        $('#content').html(tableShow);
    }
    function del(id,btn) {
        if (!confirm("确定删除该用户？")) {
            return;
        }

        $.ajax({
            cache: true,
            type: "POST",
            url: "delUser.do",
            dataType: "Json",
            data: {
                id:id
            },
            async: false,
            success: function (result) {
                $(btn).parent().parent().parent().fadeOut();
                if (result) {
                    alert("删除成功！");
                }
            }
        });
    }
</script>
</body>
</html>